<template>
	<div class="filemanagepanel">
		<el-row :gutter="20" style="margin:10px auto" type="flex">
			<el-col :span="8"><span style="font-size:12pt;font-weight: bold;">文件种类：</span></el-col>
			<el-col :span="16" style="text-align: left;">
    <el-radio-group v-model="fileClassType" @input="changeFileClassType">
      <el-radio-button v-for="(itm,idx) in fileClassTypeList" :label="itm.label" :value="itm.value" :key="itm.value"></el-radio-button>
    </el-radio-group>
    <el-input v-if="showFileClassTypeDiyInput" v-model="diyFileClassType" style="margin-left:10px;width:120px;" ref="refDiyFileClassType"></el-input>
			</el-col>
		</el-row>
		<el-row :gutter="20" style="margin:10px auto" type="flex">
			<el-col :span="8"><span style="font-size:12pt;font-weight: bold;">推送范围：</span></el-col>
			<el-col :span="16" style="text-align: left;">
				<el-radio-group v-model="filePushScopeClassType" @input="changeFilePushScopeClassType">
					<el-radio-button v-for="(itm,idx) in filePushScopeClassTypeList" :label="itm.label" :value="itm.value" :key="itm.value"></el-radio-button>
				</el-radio-group>
				<el-select v-model="diyfilePushScope" placeholder="请选择" multiple v-if="showFilePushClassTypeDiyInput" style="margin-left:10px;width:160px;" >
					<el-option :label="itm.label" :value="itm.value" :key="itm.value" v-for="(itm,idx) in filePushScopeList">
						
					</el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row :gutter="20" style="margin:10px auto"  type="flex">
			<el-col :span="8"><span style="font-size:12pt;font-weight: bold;">上传方式：</span></el-col>
			<el-col :span="16" style="text-align: left;">
				<el-radio-group v-model="uploadFileSourceType" @input="showHowUploadFilePanel" >
				<div style="display: flex;flex-direction: row;">
				<el-radio label="local" border>
						上传文件
				</el-radio>
				<el-upload
  class="upload-demo" action="http://yunluo.com:8089/uploadfiles" 
  :on-success="uploadSuccess"
  name="files" multiple :limit="9" 
  :file-list="uploadFileList" v-if="uploadLocalFile">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
				<el-radio label="scan" border>
						在线扫描
				</el-radio>
				</div>
				</el-radio-group>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				uploadFileList:[],
				s3Client:null,
				uploadFileSourceType:null,
				diyFileClassType:null,
				diyfilePushScope:[],
				showFileClassTypeDiyInput:false,
				showFilePushClassTypeDiyInput:false,
				fileClassType:null,
				filePushScopeClassType:null,
				fileClassTypeList:[
				 {label:"通知",value:"notice"},
				 {label:"方案",value:"plan"},
				 {label:"细则",value:"detail"},
				 {label:"报表",value:"report"},
				 {label:"自定义",value:"diy"},
				],
				filePushScopeClassTypeList:[
				 {label:"所有人",value:"all"},
				 {label:"管理层级",value:"diy"},
				],
				filePushScopeList:[
				 {label:"省级",value:"province"},
				 {label:"市级",value:"city"},
				 {label:"县级",value:"county"},
				]
			}
		},
		mounted(){
		},
		computed:{
			uploadLocalFile(){
				return this.uploadFileSourceType=='local'
			}
		},
		methods:{
			uploadSuccess(response, file, fileList){
				console.log(response);
			},
			changeFileClassType(label){
				console.log(label,this.fileClassType)
				if(label=="自定义"){
					this.showFileClassTypeDiyInput=true;
					let that=this;
					setTimeout(function(){
						that.$refs.refDiyFileClassType.focus();
					},999)
				}else{
					this.diyFileClassType=null;
					this.showFileClassTypeDiyInput=false;
				}
			},
			changeFilePushScopeClassType(label){
				if(label=="所有人"){
					this.diyfilePushScope=[];
					this.showFilePushClassTypeDiyInput=false;
				}else{
					this.showFilePushClassTypeDiyInput=true;
				}
				console.log(label,this.diyfilePushScope)
			},
			showHowUploadFilePanel(label){
				console.log(label,this.uploadFileSourceType)
			},
			showScanFilePanel(label){
				console.log(label,this.uploadFileSourceType)
			}
		}
	}
</script>

<style>
</style>